<template>
  <div class="plot-view">
    <div class="left">
      <common-card title="武汉市各区出行人口统计">
        <ColumnChart
          :data="districtPeople"
          v-bind="peopleGoConfig"
          class="chart"
        />
      </common-card>
      <common-card title="武汉市地铁客流量统计">
        <RoseChart :data="subwayData" v-bind="subwayConfig" class="chart" />
      </common-card>
    </div>
    <div class="right">
      <common-card title="武汉市三镇人口统计">
        <PieChart :data="peopleData" v-bind="peopleConfig" class="chart" />
      </common-card>
      <common-card title="武汉市三甲医院"> </common-card>
      <common-card title="武汉市高校学生统计"> </common-card>
    </div>
  </div>
</template>

<script setup>
import { ColumnChart, RoseChart, PieChart } from '@opd/g2plot-vue' // 引入图表组件
import { districtPeople, config as peopleGoConfig } from '@/mock/districtPeople'
import { subwayData, config as subwayConfig } from '@/mock/subway'
import { peopleData, config as peopleConfig } from '@/mock/people'
import CommonCard from '@/components/CommonCard.vue'
</script>
<style lang="scss" scoped>
.plot-view {
  .chart {
    width: 100%;
    height: 100%;
  }
  .left {
    position: fixed; // 将左侧部分固定在页面左侧
    top: 100px;
    left: 20px;
  }
  .right {
    position: fixed; // 将右侧部分固定在页面右侧
    top: 100px;
    right: 20px;
  }
}
</style>
